<template>
	<z-paging>
		<template v-if="!resultStatus">
			<view class="draw_box">
				<one ref="one" v-if="pay_mode == 1" @start="start" :devicePixelRatio="devicePixelRatio"
					@playVoice='playVoice'>
				</one>
				<three ref="three" v-if="pay_mode == 2" @start="start" :devicePixelRatio="devicePixelRatio"
					@playVoice='playVoice'>
				</three>
				<five ref="five" v-if="pay_mode == 3" @start="start" :devicePixelRatio="devicePixelRatio"
					@playVoice='playVoice'>
				</five>
				<view class="draw_btn_box" @click="start">
					<image src="https://morgan.dingxians.cn/static/draw/8.png" mode="scaleToFill" />
				</view>
			</view>
		</template>
		<template v-if="Videoflag">
			<Drawvideo @videoEnd="handleVideoEnd" @InitialVideoTime="setInitialVideoTime" @passVideo="passVideo">
			</Drawvideo>
		</template>
		<template v-if="resultStatus">
			<blidboxdrawResult :prizeList="prizeData1" :drawResultShow="drawResultShow" @gotoin="gotoin"
				@accept="accept"></blidboxdrawResult>
		</template>
	</z-paging>
</template>
<script>
	import blidboxdrawResult from '../components/blidboxdrawResult.vue'
	import three from '../components/draw/three.vue'
	import five from '../components/draw/five.vue'
	import one from '../components/draw/one.vue'
	import Drawvideo from '../components/video.vue'
	export default {
		components: {
			three, //三发动画
			one, //一发动画
			five, //五发动画 
			blidboxdrawResult,
			Drawvideo
		},
		data() {
			return {
				box_order_id: '',
				prizeData: [], // 抽奖结果
				list: [], // 商品
				resultStatus: false,
				drawResultShow: false,
				moveX: 0,
				time: 5,
				goods_id: 18,
				timers: null,
				drawText: '停止滚动',
				devicePixelRatio: 1, //像素值
				lastRecord: '',
				box_id: '',
				pay_mode: '',
				result_audio: null,
				draw_audio: null,
				skipStatus: false,
				exchangeBtn: true,
				total_recovery_price: 0,
				Videoflag: false,
				is_video: false,
				prizeData1: [],
				tabsId: ''

			}
		},

		beforeDestroy() {
			this.result_audio.destroy()
			this.draw_audio.destroy()
		},
		onLoad(option) {
			this.box_order_id = option.box_order_id
			this.tabsId = option.tabsId
			console.log(this.tabsId)
			this.box_id = option.box_id
			this.pay_mode = option.pay_mode;
			this.result_audio = uni.createInnerAudioContext();
			this.result_audio.autoplay = false;
			this.draw_audio = uni.createInnerAudioContext();
			this.draw_audio.autoplay = true;
			this.getGoodsList();
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.devicePixelRatio = res.screenWidth / 750
				}
			})
		},
		methods: {
			// 在这里执行父组件需要执行的操作
			handleVideoEnd() {
				console.log('视频播放已完毕');
				this.Videoflag = false

			},
			setInitialVideoTime() {
				console.log("视频加载完成时事件");
				this.Videoflag = true
			},
			passVideo() {
				console.log('123123')
				this.handleVideoEnd()
			},
			start() {
				this.jiangpinre()
				if (this.is_video) {
					this.setInitialVideoTime()
				}
				this.skipStatus = false;
				this.resultStatus = true;
				this.drawResultShow = true
				console.log('动画结束')
				let src = 'https://www.dingxians.cn/app/y1253.mp3' // 配置音频播放路径
				this.playVoice(src)
				this.result_audio.loop = false // 是否循环播放
			},
			// 合并的奖品结果
			jiangpinre() {
				this.$Request.get(this.$api.index.blindBoxOrderPrizesD_show + `/${this.box_order_id}`).then(res => {
					if (res.code == 200) {
						this.prizeData1 = res.data.data // 抽奖结果
					}
				})
			},
			//获取奖品列表
			getGoodsList() {
				if (this.tabsId == 4) {
					this.$Request.get(this.$api.index.blindBoxPrizes + `/${this.box_id}`).then(res => {
						if (res.code == 200) {
							this.list = res.data.data;
							this.getData()
						}
					})
				} else {
					this.$Request.get(this.$api.index.blindBox + `/${this.box_id}`).then(res => {
						if (res.code == 200) {
							this.list = res.data.data.blind_box_prize;
							this.getData()
						}
					})
				}

			},

			playVoice(url) { // url即为音频路径
				if (url) {
					// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
					if (this.lastRecord == url && !this.draw_audio.paused) {
						this.draw_audio.stop(); // 停止
						return;
					}
					this.lastRecord = url; // 将路径赋值给定义的变量好做判断
					this.draw_audio.src = url; // 配置音频播放路径
					this.draw_audio.play(); // 播放
					this.draw_audio.loop = false // 是否循环播放
				}
			},
			getData() {
				this.$Request.get(this.$api.index.blindBoxOrders + `/${this.box_order_id}`).then(res => {
					if (res.code == 200) {
						this.prizeData = res.data.data // 抽奖结果
						res.data.data.forEach(item => {
							if (item.level_id > 2) {
								this.is_video = true
							}
						});

						if (this.pay_mode == 4) {
							this.start()
						} else {
							console.log(this.prizeData)
							this.total_recovery_price = res.data.total_recovery_price

							const refData = {
								1: "one",
								2: "three",
								3: "five"
							}
							let refName = refData[this.pay_mode]

							// 奖品列表
							this.$refs[refName].textList = this.list
							// 初始化抽奖数据 n * m
							// 开始抽奖
							// 当前开奖动画组件的ref名字
							this.$refs[refName].resultsList = this.prizeData
							this.$refs[refName].isStart = true
							this.$nextTick(() => {
								this.$refs[refName].init()
								// this.playVoice('https://pd.pdaxiang.com/upload/static/media/openbox.mp3')
							})
							this.skipStatus = true;
						}


					}
				})
			},
			back() {
				uni.navigateBack()
			},
			gotoin() {
				uni.switchTab({
					url: '/pages/bonus/index',
				})
			},
			accept() {
				this.$goBack()
				this.drawResultShow = false

			},
		}
	}
</script>

<style lang="scss" scoped>
	.draw_box {
		position: relative;
		height: 100vh;
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;

		.draw_btn_box {
			position: absolute;
			bottom: 130rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 529rpx;
			height: 120rpx;
			z-index: 2;
			animation: name .8s ease infinite;

			image {
				width: 100%;
				height: 100%;
			}

			@keyframes name {
				0% {
					transform: scale(0.8);
				}

				50% {
					transform: scale(1);
				}

				100% {
					transform: scale(0.8)
				}
			}
		}
	}
</style>